﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.AdminModifyModel
@{
ViewData["Title"] = "编辑/添加用户";
Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .organize-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
        opacity: 0;
        height: 0;
        display: none;
    }

    .organize-tree.active {
        display: block;
        opacity: 1;
        height: auto;
        max-height: 500px;
        overflow: auto;
        transition: all .5s;
    }

    .form-cus {
        width: 70%;
        float: right;
    }

    .cur-image {
        width: 24%;
        position: absolute;
        left: 25px;
        top: 0px;
        margin-bottom: 0px;
    }


    .cur-image .add-photo.default {
        height: 170px;
    }

    .cur-image .select-newimg {
        padding-top: 55px;
    }

    .cur-image .add-photo img {
        height: 170px;
    }

    .widget-footer {
        border: 1px solid #f6f9fd !important;
        background-color: #f6f9fd;
        text-align: center;
        color: rgb(163, 175, 183);
    }

    .widget-footer span {
        display: block;
        line-height: 25px;
        color: #333;
    }

    .input-tags {
        border-radius: 3px !important;
        height: 24px;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        padding: 7px 10px;
    }

    .tags {
        padding: 3px 10px;
        background-color: #f0f2f5;
        color: #909399;
        margin-right: 10px;
    }
</style>
<div id="app">
    <ul class="addpic-list cur-image clearfix">
        <li>
            <div class="add-photo default">
                <div class="select-newimg fyt-cloud " :class="m.headPic?'layui-hide':''" data-text="headPic"
                    data-img="imgShow" data-type="form">
                    <i class="icon-addphote"></i>
                    <span>选择组图片</span>
                </div>
                <div class="add-photo-wall" :class="!m.headPic?'layui-hide':''">
                    <img id="imgShow" :src="m.headPic">
                    <div class="phote-edit">
                        <a class="photo-tool fyt-cloud" data-text="headPic" data-img="imgShow" data-type="form"
                            href="javascript:void(0)"><i class="layui-icon layui-icon-edit"></i>更换</a>
                        <a class="photo-tool last" href="javascript:void(0)" onclick="oc.deleteFile()"><i
                                class="layui-icon layui-icon-delete"></i>删除</a>
                    </div>
                    <div class="cover">组图片</div>
                </div>
            </div>
        </li>
        <li class="widget-footer layui-clear">上次登录：{{m.upLoginDate}}</li>
        <li class="widget-footer layui-clear">
            <div class="layui-col-xs4"><span><i class="layui-badge-dot layui-bg-blue"></i></span>状态</div>
            <div class="layui-col-xs4"><span>2</span>消息</div>
            <div class="layui-col-xs4"><span>{{m.loginSum}}次</span>登录</div>
        </li>
    </ul>
    <form class="layui-form form-cus" action="" lay-filter="forms">
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.departmentName" name="DepartmentName" id="DepartmentName"
                    lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请选择所属部门"
                    class="layui-input">
                <div class="organize-tree">
                    <div id="tree" class="layui-tree-cus"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关联角色</label>
            <div class="layui-input-block">
                <div class="input-tags"><span class="layui-badge layui-bg-gray tags"
                        v-for="it in m.roleList">{{it.name}}</span></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">登录账号</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.loginName" name="LoginName" maxlength="20" lay-verify="required"
                        lay-verType="tips" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-inline">
                    <input type="password" v-model="m.loginPwd" name="LoginPwd" maxlength="20" lay-verify="required"
                        lay-verType="tips" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.trueName" name="TrueName" maxlength="10" lay-verify="required"
                        lay-verType="tips" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.number" name="Number" maxlength="6" lay-verify="required"
                        lay-verType="tips" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" title="男" lay-filter="sex">
                    <input type="radio" name="sex" value="女" title="女" lay-filter="sex">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="status" lay-skin="switch" lay-filter="status" lay-text="ON|OFF">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input type="text" v-model="m.mobile" name="Mobile" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="email" v-model="m.email" name="Email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-cur-submit">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i
                        class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>
    </form>
</div>
@section Scripts{
<script>
    var oc,
        vm = new Vue({
            el: '#app',
            data: {
                m: {}
            }
        });
    layui.config({
        base: '/themes/js/modules/'
    }).use(['layer', 'jquery', 'common', 'form', 'tree'],
        function () {
            var form = layui.form, $ = layui.$, os = layui.common, tree = layui.tree;
            var index = parent.layer.getFrameIndex(window.name);
            form.on('radio(sex)',
                function (data) {
                    vm.m.sex = data.value;
                });
            form.on('switch(status)',
                function (data) {
                    vm.m.status = data.elem.checked;
                });
            os.cloudFile();
            oc = {
                init() {
                    //查询角色信息
                    os.ajax('api/admin/bymodel/',
                        { parm: os.getUrlParam('guid') },
                        function (res) {
                            if (res.statusCode == 200) {
                                vm.m = res.data;
                                vm.$nextTick(function () {
                                    form.val('forms',
                                        {
                                            'sex': vm.m.sex,
                                            'status': vm.m.status
                                        });
                                });
                            } else {
                                os.error(res.message);
                            }
                        });
                    $('.input-tags').click(function () {
                        var frameId = window.frameElement && window.frameElement.id || '';
                        os.Open('关联角色', '/fytadmin/sys/adminmodifytorole?frameid=' + frameId + '&role=' + escape(JSON.stringify(vm.m.roleList)), '600px', '500px');
                    });
                },
                fileSave(v) {
                    $(".select-newimg").addClass('layui-hide');
                    $(".add-photo-wall").removeClass('layui-hide');
                    vm.m.headPic = v;
                    $('#imgShow').attr('src', v);
                },
                deleteFile() {
                    $(".select-newimg").removeClass('layui-hide');
                    $(".add-photo-wall").addClass('layui-hide');
                    $('#imgShow').attr('src', v);
                },
                saveRole(list) {
                    vm.m.roleGuid = list;
                    vm.m.roleList = JSON.parse(list);
                }
            };
            oc.init();
            //监听提交
            form.on('submit(submit)',
                function (data) {
                    $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                    var urls = "api/admin/add";
                    if (vm.m.guid) {
                        urls = "api/admin/edit";
                    }
                    os.ajax(urls,
                        vm.m,
                        function (res) {
                            $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                            if (res.statusCode == 200) {
                                parent.layer.close(index);
                            } else {
                                os.error(res.message);
                            }
                        });
                    return false;
                });
            $(".btn-open-close").on('click',
                function () {
                    parent.layer.close(index);
                });

            os.ajax('api/organize/gettree/',
                {},
                function (res) {
                    tree.render({
                        elem: '#tree',
                        data: res,
                        onlyIconControl: true,
                        click: function (obj) {
                            guid = obj.data.id;
                            vm.m.departmentGuid = obj.data.id;
                            vm.m.departmentName = obj.data.title;
                            $(".organize-tree").removeClass('active');
                        }
                    });
                });
            $("#DepartmentName").click(function () {
                $(".organize-tree").addClass('active');
            });
            $(".organize-tree").mouseleave(function () {
                $(".organize-tree").removeClass('active');
            });
        });
</script>
}